<template>
  <div>
    <div v-for="(item, index) in order" :key="index" class="orderbox">
      <div>
        <p style="float: left">
          {{ item.vendor }} <van-icon name="arrow" style="color: #666; font-size: 0.7rem" />
        </p>
        <p style="color: red; float: right">{{ item.status }}</p>
        <div style="clear: both"></div>
      </div>
      <div class="orderbox-content">
        <div class="orderbox-left">
          <img :src="item.image" alt="">
        </div>
        <div class="orderbox-center">
            <p>自带4线充电宝50000室安超级快充120W大容量适用苹果华为手机闪充</p>
            <p style="font-size: .7rem; color:#ccc;margin-top: .2rem;">白【超级快充120W+快充线】,50000毫安</p>
        </div>
        <div class="orderbox-right">
           <p>x{{ item.price }}</p>
           <p style="color:#ccc;">x{{ item.num }}</p>
        </div>
      </div>
      <div style="margin-top: .4rem;">
          <button class="btn">去付款</button>
          <div style="clear: both"></div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, defineProps } from 'vue'
const props = defineProps({
  order: Array<string>,
})
console.log(props.order)
var order = ref<any>(props.order)
</script>
<style lang="scss">
.orderbox:nth-child(1) {
  border-top: 0.2rem solid #f6f6f6;
}
.orderbox {
  width: 100%;
  background-color: #fff;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  padding: 0.5rem;
}
.orderbox-content {
  width: 100%;
  margin-top: 0.3rem;
  // height: 3rem;
  display: flex;
  font-size: 0.8rem;
  border-bottom: 0.1rem solid #f6f6f6;
}
.orderbox-left {
  flex: 0.25;
  // background-color: rgb(255, 255, 0);
  img {
    width: 100%;
  }
}
.orderbox-center {
  flex: 0.6;
  // background-color: rgb(158, 249, 0);
  padding: 0.2rem;
}
.orderbox-right {
  flex: 0.15;
  // background-color: rgb(0, 106, 253);
  text-align: center;
  p {
    line-height: 1.5rem;
  }
}
.btn {
  padding: 0.2rem 0.5rem;
  color: #fff;
  background-color: rgba(222, 0, 0, 0.832);
  border: none;
  border-radius: 0.3rem;
  margin-top: .3rem;
  // height: 3rem;
  display: flex;
  font-size: .8rem;
  border-bottom: .1rem solid #f6f6f6;
}
.orderbox-left{
  flex: .25;
  // background-color: rgb(255, 255, 0);
  img{
    width: 100%;
  }
}
.orderbox-center{
  flex: .60;
  // background-color: rgb(158, 249, 0);
  padding: .2rem;
}
.orderbox-right{
  flex: .15;
  // background-color: rgb(0, 106, 253);
  text-align: center;
  p{
    line-height: 1.5rem;
  }
}
.btn{
  padding: .2rem .5rem;
  color:#fff;
  background-color: rgba(222, 0, 0, 0.832);
  border: none;
  border-radius: .3rem;
  float: right;
}
</style>
